<script setup lang="ts">
import type { ArticleVO } from '@/types/vo/ArticleVO'
import { getRecommendArticle } from '@/apis/front/article'

const recommendList = ref<ArticleVO[]>()

const getData = async () => {
  const res = await getRecommendArticle()
  recommendList.value = res.data.data
}

const router = useRouter()

onMounted(async () => {
  await getData()
})
</script>

<template>
  <div class="rounded-2 bg-white p-6px flex flex-col items-center gap-5px">
    <div class="header w-full flex items-center gap-5px">
      <i-custom-recommend width="24px" height="24px" />
      <span>推荐文章</span>
    </div>
    <div
      class="bg-#f7f8fa w-full flex flex-col gap-10px rounded-2 p-6px relative"
    >
      <div
        class="flex items-start justify-between gap-5px cursor-pointer hover:bg-#dddddd px-2px py-4px rounded-2"
        v-for="(item, index) in recommendList"
        :key="item.id"
        @click="
          router.push({
            path: '/article/ArticleDetail',
            query: {
              articleId: item.id,
            },
          })
        "
      >
        <i-custom-first width="24px" height="24px" v-if="index === 0" />
        <i-custom-second width="24px" height="24px" v-else-if="index === 1" />
        <i-custom-third width="24px" height="24px" v-else-if="index === 2" />
        <div
          class="w-24px h-24px bg-#dadada flex justify-between items-center text-align-center rounded-50%"
          v-else
        >
          <span class="mx-auto">{{ index + 1 }}</span>
        </div>
        <div class="flex-1">{{ item.articleName }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  padding-bottom: 5px;
  border-bottom: 2px solid #aaaaaa;
}
</style>
